import { Metadata } from 'next';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  BookOpen,
  Calendar,
  Clock,
  User,
  Eye,
  Heart,
  MessageSquare,
  Search,
  Filter,
  TrendingUp,
  Code,
  Lightbulb,
  Target,
  ArrowRight,
  Tag,
} from 'lucide-react';

export const metadata: Metadata = {
  title: '技术博客 | CActor框架社区',
  description:
    '深度技术文章、最佳实践分享和行业洞察，助您掌握Actor模型开发精髓。',
};

/**
 * 博客文章分类
 */
const categories = [
  { name: '全部', count: 156, active: true },
  { name: '技术深度', count: 45, active: false },
  { name: '最佳实践', count: 38, active: false },
  { name: '案例分析', count: 32, active: false },
  { name: '性能优化', count: 28, active: false },
  { name: '行业趋势', count: 13, active: false },
];

/**
 * 精选文章
 */
const featuredPosts = [
  {
    id: 1,
    title: 'CActor 3.0 架构设计深度解析',
    excerpt:
      '深入探讨CActor 3.0的全新架构设计理念，包括分层架构、消息传递机制优化和性能提升策略。',
    author: {
      name: 'Alex Chen',
      avatar: '👨‍💻',
      role: 'Core Maintainer',
    },
    publishDate: '2024-01-15',
    readTime: '12分钟',
    views: '2.1K',
    likes: 89,
    comments: 23,
    category: '技术深度',
    tags: ['架构', 'v3.0', '设计模式'],
    featured: true,
  },
  {
    id: 2,
    title: '金融高频交易系统的Actor模型实践',
    excerpt:
      '分享在金融高频交易系统中应用Actor模型的实战经验，包括延迟优化、并发处理和容错设计。',
    author: {
      name: 'Sarah Kim',
      avatar: '👩‍💻',
      role: 'Senior Developer',
    },
    publishDate: '2024-01-12',
    readTime: '15分钟',
    views: '1.8K',
    likes: 76,
    comments: 18,
    category: '案例分析',
    tags: ['金融', '高频交易', '性能优化'],
    featured: true,
  },
];

/**
 * 最新文章列表
 */
const recentPosts = [
  {
    id: 3,
    title: 'Actor模型在微服务架构中的应用模式',
    excerpt:
      '探讨如何在微服务架构中有效应用Actor模型，实现服务间的高效通信和状态管理。',
    author: {
      name: 'Mike Johnson',
      avatar: '👨‍🔬',
      role: 'Documentation Lead',
    },
    publishDate: '2024-01-10',
    readTime: '8分钟',
    views: '1.2K',
    likes: 45,
    comments: 12,
    category: '最佳实践',
    tags: ['微服务', 'Actor模型', '架构模式'],
  },
  {
    id: 4,
    title: 'CActor性能调优实战指南',
    excerpt:
      '从内存管理、消息传递优化到并发控制，全面介绍CActor框架的性能调优技巧和最佳实践。',
    author: {
      name: 'Lisa Wang',
      avatar: '👩‍🚀',
      role: 'Performance Engineer',
    },
    publishDate: '2024-01-08',
    readTime: '10分钟',
    views: '1.5K',
    likes: 62,
    comments: 15,
    category: '性能优化',
    tags: ['性能调优', '内存管理', '并发控制'],
  },
  {
    id: 5,
    title: '分布式系统中的Actor生命周期管理',
    excerpt:
      '深入分析分布式环境下Actor的创建、监督、重启和销毁机制，确保系统的高可用性。',
    author: {
      name: 'David Lee',
      avatar: '👨‍💼',
      role: 'System Architect',
    },
    publishDate: '2024-01-05',
    readTime: '11分钟',
    views: '980',
    likes: 38,
    comments: 9,
    category: '技术深度',
    tags: ['分布式系统', '生命周期', '高可用'],
  },
  {
    id: 6,
    title: '从Akka到CActor：迁移指南和经验总结',
    excerpt:
      '详细介绍从Akka框架迁移到CActor的完整流程，包括代码改造、性能对比和注意事项。',
    author: {
      name: 'Emma Zhang',
      avatar: '👩‍🎓',
      role: 'Migration Specialist',
    },
    publishDate: '2024-01-03',
    readTime: '14分钟',
    views: '1.3K',
    likes: 54,
    comments: 21,
    category: '最佳实践',
    tags: ['迁移', 'Akka', '对比分析'],
  },
  {
    id: 7,
    title: 'Actor模型在IoT场景下的创新应用',
    excerpt:
      '探索Actor模型在物联网领域的应用潜力，包括设备管理、数据处理和边缘计算优化。',
    author: {
      name: 'Tom Wilson',
      avatar: '👨‍🔧',
      role: 'IoT Specialist',
    },
    publishDate: '2024-01-01',
    readTime: '9分钟',
    views: '856',
    likes: 31,
    comments: 7,
    category: '行业趋势',
    tags: ['IoT', '边缘计算', '创新应用'],
  },
  {
    id: 8,
    title: 'CActor监控和调试工具深度使用指南',
    excerpt:
      '全面介绍CActor框架提供的监控和调试工具，帮助开发者快速定位和解决问题。',
    author: {
      name: 'Anna Brown',
      avatar: '👩‍🔧',
      role: 'DevOps Engineer',
    },
    publishDate: '2023-12-28',
    readTime: '13分钟',
    views: '1.1K',
    likes: 47,
    comments: 16,
    category: '技术深度',
    tags: ['监控', '调试', '工具使用'],
  },
];

/**
 * 热门标签
 */
const popularTags = [
  { name: 'Actor模型', count: 45 },
  { name: '性能优化', count: 38 },
  { name: '分布式系统', count: 32 },
  { name: '最佳实践', count: 28 },
  { name: '架构设计', count: 25 },
  { name: '金融应用', count: 22 },
  { name: '微服务', count: 19 },
  { name: '并发编程', count: 16 },
];

export default function BlogPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-purple-50">
      {/* Hero Section */}
      <section className="py-16 px-4 bg-white border-b">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <div className="inline-flex items-center px-4 py-2 rounded-full bg-purple-100 text-purple-700 text-sm font-medium mb-6">
              <BookOpen className="w-4 h-4 mr-2" />
              技术博客
            </div>
            <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
              深度技术
              <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
                洞察分享
              </span>
            </h1>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
              探索Actor模型的技术深度，分享实战经验和最佳实践，
              与全球开发者一起推动技术创新和发展。
            </p>

            {/* 搜索和筛选 */}
            <div className="flex flex-col sm:flex-row gap-4 max-w-2xl mx-auto">
              <div className="relative flex-1">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                <Input
                  placeholder="搜索文章标题、内容或标签..."
                  className="pl-10"
                />
              </div>
              <Button variant="outline">
                <Filter className="w-4 h-4 mr-2" />
                筛选
              </Button>
            </div>
          </div>

          {/* 分类导航 */}
          <div className="flex flex-wrap gap-2 justify-center">
            {categories.map((category, index) => (
              <Button
                key={index}
                variant={category.active ? 'default' : 'outline'}
                size="sm"
                className={
                  category.active ? 'bg-purple-600 hover:bg-purple-700' : ''
                }
              >
                {category.name}
                <Badge variant="secondary" className="ml-2 text-xs">
                  {category.count}
                </Badge>
              </Button>
            ))}
          </div>
        </div>
      </section>

      {/* 精选文章 */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="flex items-center justify-between mb-8">
            <h2 className="text-2xl md:text-3xl font-bold text-gray-900">
              精选文章
            </h2>
            <Badge className="bg-purple-100 text-purple-700">
              <TrendingUp className="w-3 h-3 mr-1" />
              编辑推荐
            </Badge>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            {featuredPosts.map(post => (
              <Card
                key={post.id}
                className="hover:shadow-xl transition-all duration-300 group"
              >
                <CardHeader>
                  <div className="flex items-center justify-between mb-3">
                    <Badge className="bg-purple-100 text-purple-700">
                      {post.category}
                    </Badge>
                    <div className="flex items-center text-sm text-gray-500">
                      <Calendar className="w-4 h-4 mr-1" />
                      {post.publishDate}
                    </div>
                  </div>
                  <CardTitle className="text-xl group-hover:text-purple-600 transition-colors line-clamp-2">
                    {post.title}
                  </CardTitle>
                  <CardDescription className="text-gray-600 line-clamp-3">
                    {post.excerpt}
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  {/* 作者信息 */}
                  <div className="flex items-center">
                    <div className="text-2xl mr-3">{post.author.avatar}</div>
                    <div>
                      <div className="font-medium text-gray-900">
                        {post.author.name}
                      </div>
                      <div className="text-sm text-gray-500">
                        {post.author.role}
                      </div>
                    </div>
                  </div>

                  {/* 标签 */}
                  <div className="flex flex-wrap gap-2">
                    {post.tags.map((tag, tagIndex) => (
                      <Badge
                        key={tagIndex}
                        variant="outline"
                        className="text-xs"
                      >
                        #{tag}
                      </Badge>
                    ))}
                  </div>

                  {/* 统计信息 */}
                  <div className="flex items-center justify-between pt-4 border-t">
                    <div className="flex items-center space-x-4 text-sm text-gray-500">
                      <div className="flex items-center">
                        <Clock className="w-4 h-4 mr-1" />
                        {post.readTime}
                      </div>
                      <div className="flex items-center">
                        <Eye className="w-4 h-4 mr-1" />
                        {post.views}
                      </div>
                      <div className="flex items-center">
                        <Heart className="w-4 h-4 mr-1" />
                        {post.likes}
                      </div>
                      <div className="flex items-center">
                        <MessageSquare className="w-4 h-4 mr-1" />
                        {post.comments}
                      </div>
                    </div>
                    <Button
                      size="sm"
                      className="group-hover:bg-purple-600 transition-colors"
                    >
                      阅读全文
                      <ArrowRight className="w-4 h-4 ml-2" />
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* 最新文章 */}
      <section className="py-16 px-4 bg-white">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* 文章列表 */}
            <div className="lg:col-span-2">
              <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-8">
                最新文章
              </h2>

              <div className="space-y-6">
                {recentPosts.map(post => (
                  <Card
                    key={post.id}
                    className="hover:shadow-lg transition-all duration-300 group"
                  >
                    <CardContent className="p-6">
                      <div className="flex items-start justify-between">
                        <div className="flex-1">
                          <div className="flex items-center gap-3 mb-3">
                            <Badge variant="secondary">{post.category}</Badge>
                            <div className="text-sm text-gray-500">
                              {post.publishDate}
                            </div>
                          </div>

                          <h3 className="text-lg font-semibold text-gray-900 mb-2 group-hover:text-purple-600 transition-colors">
                            {post.title}
                          </h3>

                          <p className="text-gray-600 mb-4 line-clamp-2">
                            {post.excerpt}
                          </p>

                          {/* 作者和统计 */}
                          <div className="flex items-center justify-between">
                            <div className="flex items-center">
                              <div className="text-lg mr-2">
                                {post.author.avatar}
                              </div>
                              <div className="text-sm">
                                <div className="font-medium text-gray-900">
                                  {post.author.name}
                                </div>
                                <div className="text-gray-500">
                                  {post.author.role}
                                </div>
                              </div>
                            </div>

                            <div className="flex items-center space-x-3 text-sm text-gray-500">
                              <div className="flex items-center">
                                <Clock className="w-3 h-3 mr-1" />
                                {post.readTime}
                              </div>
                              <div className="flex items-center">
                                <Eye className="w-3 h-3 mr-1" />
                                {post.views}
                              </div>
                              <div className="flex items-center">
                                <Heart className="w-3 h-3 mr-1" />
                                {post.likes}
                              </div>
                            </div>
                          </div>

                          {/* 标签 */}
                          <div className="flex flex-wrap gap-1 mt-3">
                            {post.tags.map((tag, tagIndex) => (
                              <Badge
                                key={tagIndex}
                                variant="outline"
                                className="text-xs"
                              >
                                #{tag}
                              </Badge>
                            ))}
                          </div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>

              {/* 加载更多 */}
              <div className="text-center mt-8">
                <Button variant="outline" size="lg">
                  加载更多文章
                  <ArrowRight className="w-4 h-4 ml-2" />
                </Button>
              </div>
            </div>

            {/* 侧边栏 */}
            <div className="space-y-8">
              {/* 热门标签 */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <Tag className="w-5 h-5 mr-2" />
                    热门标签
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="flex flex-wrap gap-2">
                    {popularTags.map((tag, index) => (
                      <Button
                        key={index}
                        variant="outline"
                        size="sm"
                        className="text-xs hover:bg-purple-50 hover:border-purple-200"
                      >
                        #{tag.name}
                        <Badge variant="secondary" className="ml-1 text-xs">
                          {tag.count}
                        </Badge>
                      </Button>
                    ))}
                  </div>
                </CardContent>
              </Card>

              {/* 写作指南 */}
              <Card className="bg-gradient-to-br from-purple-50 to-pink-50">
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <Lightbulb className="w-5 h-5 mr-2 text-purple-600" />
                    参与写作
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <p className="text-sm text-gray-600">
                    分享您的技术经验和见解，帮助更多开发者成长。
                  </p>
                  <div className="space-y-2">
                    {[
                      '技术深度文章',
                      '实战经验分享',
                      '最佳实践总结',
                      '案例分析报告',
                    ].map((item, index) => (
                      <div key={index} className="flex items-center text-sm">
                        <Code className="w-3 h-3 text-purple-500 mr-2" />
                        <span className="text-gray-600">{item}</span>
                      </div>
                    ))}
                  </div>
                  <Button className="w-full bg-purple-600 hover:bg-purple-700">
                    开始写作
                    <ArrowRight className="w-4 h-4 ml-2" />
                  </Button>
                </CardContent>
              </Card>

              {/* 社区统计 */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <Target className="w-5 h-5 mr-2" />
                    社区统计
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  {[
                    { label: '总文章数', value: '156', icon: BookOpen },
                    { label: '活跃作者', value: '42', icon: User },
                    { label: '总阅读量', value: '89K', icon: Eye },
                    { label: '社区点赞', value: '2.1K', icon: Heart },
                  ].map((stat, index) => {
                    const Icon = stat.icon;
                    return (
                      <div
                        key={index}
                        className="flex items-center justify-between"
                      >
                        <div className="flex items-center">
                          <Icon className="w-4 h-4 text-purple-600 mr-2" />
                          <span className="text-sm text-gray-600">
                            {stat.label}
                          </span>
                        </div>
                        <span className="font-semibold text-gray-900">
                          {stat.value}
                        </span>
                      </div>
                    );
                  })}
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
